<template>
  <!-- 信息总览弹窗 -->
  <div class="SubstationDetailsPopUp">
    <div class="SubstationDetailsPopUp-left">
      <div class="Terr borderStyle" id="treeout">
        <el-tree
          :data="treedata"
          icon-class="custom"
          :props="defaultProps"
          ref="tree"
          node-key="id"
          show-checkbox
          highlight-current
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          :default-expanded-keys="selectID"
          :default-checked-keys="selectID"
        ></el-tree>
      </div>
      <div class="btn-foot">
        <el-button
          class="btn"
          type="primary"
          @click="checkReport"
          :disabled="checkReportStatus"
        >确定报告</el-button>
        <el-button class="btn" type="primary" @click="resetReport">刷新</el-button>
      </div>
    </div>
    <div class="SubstationDetailsPopUp-right">
      <div class="Terr borderStyle">
        <el-form ref="form" class="form" :model="form" label-width="90px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="巡检点位">
                <el-input v-model="form.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="巡检时间">
                <el-input v-model="form.time" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人工核实">
                <el-select v-model="form.rghs" placeholder="请选择">
                  <el-option
                    v-for="item in rghs_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="识别结论">
                <el-input v-model="form.sbjl" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="vode">
          <div class="oneImg" v-if="bigImgStatus">
            <!-- <div> -->
            <!-- 一张 -->
            <!-- <div>{{bigImgUrl.name}}</div> -->
            <img :src="bigImgUrl.flag" :alt="bigImgUrl.name" />
            <!-- </div> -->
          </div>
          <div class="fourImg" v-else>
            <div v-for="(item,index) in imgData" :key="index">
              <!-- <div @dblclick="changeOneImg(item)">{{item.name}}</div> -->
              <img :src="item.flag" :alt="item.name" @dblclick="changeOneImg(item)" />
              <!-- <el-image :src="item.testurl" :preview-src-list="item.testurllist"></el-image> -->
            </div>
          </div>
        </div>
      </div>
      <div class="btn-foot">
        <el-button class="btn" type="primary" @click="prevsb" :disabled="prevsbStatus">←</el-button>
        <el-button class="btn" type="primary" @click="prevdw" :disabled="prevdwStatus">上一页</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="pictrueStart"
          :disabled="pictrueStartStatus"
        >自动播放</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="pictrueStop"
          :disabled="pictrueStopStatus"
        >停止播放</el-button>
        <el-button class="btn" type="primary" @click="nextdw" :disabled="nextdwStatus">下一页</el-button>
        <el-button class="btn" type="primary" @click="nextsb" :disabled="nextsbStatus">→</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tree } from "element-ui";

@Component
export default class SubstationDetailsPopUp extends Vue {
  @Prop()
  Manipulation: any;
  @Prop({ default: () => "" })
  JHLX;
  public options: Array<any> = [];
  value = "";
  public treedata: any[] = [];
  public defaultProps = {
    label: "name",
    children: "children",
  };
  $refs!: {
    tree: Tree;
  };
  //form 一条点位的4个数据
  public form: any = {
    name: "",
    time: "",
    rghs: "",
    sbjl: "",
  };
  rghs_options: any[] = [
    {
      label: "未核实",
      value: "0",
    },
    {
      label: "已核实",
      value: "1",
    },
    {
      label: "误报",
      value: "2",
    },
    {
      label: "图数不一致",
      value: "4",
    },
    {
      label: "无法识别",
      value: "5",
    },
  ];

  deviceData = []; //设备层级 所有数据
  deviceIndex: number = 0; //当前选中的设备在设备数组里的下标
  pointData = []; //点位数据
  pointIndex: number = 0; //当前选中的单张图片在点位数组里的下标
  lastData = {}; //当前选中的一条设备数据
  bigImgStatus = false; //一张大图片
  bigImgUrl = {};
  public checkReportStatus: boolean = false;
  public prevsbStatus: boolean = true;
  public prevdwStatus: boolean = true; //true是禁用
  public pictrueStartStatus: boolean = true;
  public pictrueStopStatus: boolean = true;
  public nextdwStatus: boolean = true;
  public nextsbStatus: boolean = true;
  num = 1; //截取点位数组的前一个数 默认1
  imgData = [];
  times;
  pointDataAll = []; //所有点位的数组
  pointAllIndex: number = 0; //当前播放的单张图片在所有点位数组里的下标

  // 树图接口 先用任务管理的树图接口
  getBdzAreaSpaceDevTree() {
    // console.log(this.Manipulation);
    var params = {
      jhid: this.Manipulation.ID,
      xslx: this.Manipulation.XSLX,
      jhlx: "zjh",
    };
    console.log(this.JHLX);
    params.jhlx=this.JHLX?this.JHLX:"zjh";
    // var params = {
    //   bdzId: "100000008",
    //   xjlx: "1",
    // };
    // initBdzDwTree
    (this as any).$services
      .getBdzAreaSpaceDevTree({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.treedata = result.data;
          this.Fn(this.treedata);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 递归树图里的设备点位
  fnindex = 0;
  Fn(data) {
    data.forEach((item, i) => {
      item["id"] = "tree" + this.fnindex;
      this.fnindex++;
      if (item.type === "sb") {
        this.deviceData.push(item);
      }
      if (item.type === "cd") {
        this.pointDataAll.push(item);
      }
      if (item.children) {
        this.Fn(item.children);
      }
    });
  }

  // 树图点击事件
  handleNodeClick(data: any) {
    if (data.type === "sb") {
      this.lastData = data;
      this.nextsbStatus = false;
      this.deviceIndex = this.deviceData.indexOf(data);
      if (this.deviceIndex < 1) {
        this.prevsbStatus = true;
      } else {
        this.prevsbStatus = false;
      }
      this.pointData = data.children;
      this.setFourImg(1, "click");
      if (data.children.length > 4) {
        this.nextdwStatus = false;
      }
    } else if (data.type === "cd") {
      this.nextsbStatus = false;
      // 自动播放
      this.pictrueStartStatus = false;
      this.form = {
        name: data.name,
        time: data.jcsj,
        rghs: data.checked ? "已核实" : "未核实",
        sbjl: data.xsjg === "1" ? "正常" : "异常",
      };
      this.changeOneImg(data, "click");
    } else {
      this.prevsbStatus = true;
      this.nextsbStatus = true;
    }
  }

  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  selectID = [];
  // 确认报告
  checkReport() {
    console.log(this.JHLX);
    
    var form: any = {};
    form.jhid = this.Manipulation.ID || "";
    form.xslx = this.Manipulation.XSLX || "";
    form.jhlx = this.JHLX ? this.JHLX : "zjh";
    form._ = this.Manipulation.BDZID || "";
    (this as any).$services
      .xsjhConfirm({ data: form })
      .then((result: any) => {
        this.$emit("closexxzl");
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
        this.$emit("closexxzl");
      });
  }
  // 刷新
  resetReport() {
    this.deviceData = [];
    this.pointData = [];
    this.bigImgUrl = {};
    this.bigImgStatus = false;
    this.lastData = {};
    this.getBdzAreaSpaceDevTree();
    this.prevsbStatus = true;
    this.prevdwStatus = true;
    this.pictrueStartStatus = true;
    this.pictrueStopStatus = true;
    this.nextdwStatus = true;
    this.nextsbStatus = true;
  }
  // 上一个设备的点位
  prevsb() {
    this.bigImgStatus = false;
    this.deviceIndex = this.deviceData.indexOf(this.lastData);
    this.lastData = this.deviceData[this.deviceIndex - 1];
    this.pointData = this.deviceData[this.deviceIndex - 1].children;
    this.setFourImg(1, "prev");
    this.nextsbStatus = false;
    if (this.deviceIndex < 1) {
      this.prevsbStatus = true;
    }
  }
  // 上一个点位
  prevdw() {
    this.nextdwStatus = false;
    if (this.bigImgStatus) {
      this.pointIndex = this.pointData.indexOf(this.bigImgUrl);
      this.changeOneImg(this.pointData[this.pointIndex - 1], "prev");
      if (this.pointIndex < 2) {
        this.prevdwStatus = true;
      }
    } else {
      this.num--;
      this.setFourImg(this.num, "prev");
      if (this.num < 2) {
        this.prevdwStatus = true;
      }
    }
  }
  // 自动播放
  pictrueStart() {
    this.pictrueStopStatus = false;
    this.pictrueStartStatus = true;
    this.prevsbStatus = true;
    this.prevdwStatus = true;
    this.nextdwStatus = true;
    this.nextsbStatus = true;
    this.setTimer()
    // this.times = setInterval(() => {
    //   this.nextdwAll();
    // }, 3000);
  }
  // 停止播放
  pictrueStop() {
    this.pictrueStartStatus = false;
    this.pictrueStopStatus = true;
    this.clearTimer()
    // clearInterval(this.times);
    // this.times = null;
  }
  // 当前设备的下一页的四个点位或者 下一张图片
  nextdw() {
    this.prevdwStatus = false;
    if (this.bigImgStatus) {
      this.pointIndex = this.pointData.indexOf(this.bigImgUrl);
      this.changeOneImg(this.pointData[this.pointIndex + 1], "next");
      if (this.pointIndex >= this.pointData.length - 2) {
        this.nextdwStatus = true;
      }
    } else {
      this.num++;
      this.setFourImg(this.num, "next");
      if (this.num * 4 >= this.pointData.length) {
        this.nextdwStatus = true;
      }
    }
  }
  // 下一个设备的点位数据
  nextsb() {
    this.bigImgStatus = false;
    this.deviceIndex = this.deviceData.indexOf(this.lastData);
    this.lastData = this.deviceData[this.deviceIndex + 1];
    this.pointData = this.deviceData[this.deviceIndex + 1].children;
    this.setFourImg(1, "next");
    this.prevsbStatus = false;
    if (this.deviceIndex == this.deviceData.length - 1) {
      this.nextsbStatus = true;
    }
  }
  // 自动播放所有点位
  nextdwAll() {
    this.pointAllIndex = this.pointDataAll.indexOf(this.bigImgUrl);
    this.changeOneImg(this.pointDataAll[this.pointAllIndex + 1], "next");
    if (this.pointAllIndex >= this.pointDataAll.length - 2) {
      // clearInterval(this.times);
      // this.times = null;
      this.clearTimer()
      this.prevsbStatus = false;
      this.pictrueStopStatus = true;
      this.prevdwStatus = true;
      this.nextdwStatus = true;
      this.nextsbStatus = true;
    }
  }

  // 四张图片
  setFourImg(val, type) {
    var treeout = document.getElementById("treeout");
    if (type === "next") {
      treeout.scrollTop = treeout.scrollTop + 240;

      // console.log('treeout.scrollHeight:',treeout.scrollHeight);

      // treeout.scrollTop = treeout.scrollHeight;
    } else if (type === "prev") {
      treeout.scrollTop = treeout.scrollTop - this.pointData.length * 60;
      console.log("treeout.scrollHeight:", treeout.scrollHeight);
    }
    // console.log(treeout.scrollTop);
    this.selectID = [];
    (this.$refs.tree as any).setCheckedKeys([]);
    // this.treedom.scrollTop = 100;

    this.bigImgStatus = false;
    if (this.pointData.length > 4) {
      this.imgData = this.pointData.slice((val - 1) * 4, val * 4);
    } else {
      this.imgData = this.pointData;
    }
    this.imgData.map((k) => {
      this.selectID.push(k.id);
    });
  }
  // 一张图片
  changeOneImg(val, type) {
    var treeout = document.getElementById("treeout");
    if (type === "next") {
      treeout.scrollTop = treeout.scrollTop + 34;
      // treeout.scrollTop = treeout.scrollHeight;
      console.log("treeout.scrollTop:", treeout.scrollTop);
    } else if (type === "prev") {
      treeout.scrollTop = treeout.scrollTop - 60;
    }
    this.selectID = [];
    (this.$refs.tree as any).setCheckedKeys([]);
    if (this.pointData.length > 1) {
      if (this.pointData.indexOf(val) === 0) {
        this.nextdwStatus = false;
        this.prevdwStatus = true;
      } else if (this.pointData.indexOf(val) === this.pointData.length) {
        this.nextdwStatus = true;
        this.prevdwStatus = false;
      } else {
        this.nextdwStatus = false;
        this.prevdwStatus = false;
      }
    }
    this.selectID = [val.id];
    this.bigImgUrl = val;
    this.bigImgStatus = true;
  }
  mounted() {
    this.getBdzAreaSpaceDevTree();
    if (this.Manipulation.SFQR != "0") {
      this.checkReportStatus = true;
    }
  }
  timer = null;
  beforeDestroy() {
    this.clearTimer();
  }
  setTimer() {
    this.clearTimer();
    this.timer = window.setInterval(this.nextdwAll, 3000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.SubstationDetailsPopUp {
  width: 100%;
  height: 6rem;
  display: flex;
  .SubstationDetailsPopUp-left {
    width: 25%;
    .Terr {
      width: 100%;
      height: calc(100% - 0.5rem);
      padding: 0.15rem;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .btn-foot {
      width: 100%;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
  }
  .SubstationDetailsPopUp-right {
    width: calc(75% - 0.1rem);
    margin-left: 0.1rem;
    .Terr {
      width: 100%;
      height: calc(100% - 0.5rem);
      padding: 0.15rem 0.15rem 0 0.15rem;
      .vode {
        width: 100%;
        height: calc(100% - 1rem);
        > div {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .fourImg {
          display: flex;
          flex-wrap: wrap;
          > div {
            width: 50%;
            height: 50%;
            border-bottom: 1px solid blue;
            border-right: 1px solid blue;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .btn-foot {
      width: 100%;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .row-to {
    margin: 0.1rem 0;
  }
}
</style>
<style lang="scss">
.SubstationDetailsPopUp {
  .SubstationDetailsPopUp-left {
    .btn {
      height: 0.36rem;
    }
  }
  .form {
    padding: 0.15rem 0.15rem 0;
  }
}
</style>
